<template>
  <div class="flex-grid">
    <div class="flex-main">
      <div class="swipe">
        <div class="return iconfont icon-return" @click="back"></div><div class="qrz">去认证</div>
        <swipe>
          <swipe-item class="slide1" v-for="(swiper, index) in swipers" :key="index">
            <img :src="swiper">
          </swipe-item>
        </swipe>
      </div>
      <div class="shop">
        <section class="shopname hairlines">
          <h2>{{shop.name}}</h2>
        </section>
        <section class="shopsite">
          <i class="iconfont icon-dingwei"></i>
          {{shop.site}}
        </section>
      </div>
      <div ref="profile" class="profile">
        <section ref="content">
          <h3>店铺简介</h3>
          <p v-html="shop.profile"></p>
        </section>
        <div class="shape" ref="shape">
          <div class="linear"></div>
          <div class="end iconfont icon-xiala" @click="toSpread" :class="spread ? 'spreaded' : ''"></div>
        </div>
      </div>
      <div class="recommend" v-if="bind_seller === 0">
        <div class="title">
          <section class="caption-cross">
            <h3 class="caption-pointer">为您推荐</h3>
          </section>
        </div>
        <business-lists :datas="businessLists" :isLoading="isLoading"></business-lists>
      </div>
    </div>
    <footer class="flex-footer">
      <template v-if="isBind === 0">
        <input class="get-phone footer-left-bt" type="button" value="获取咨询电话" @click="bindPhone">
      </template>
      <template v-else>
        <a class="show-phone footer-left-simulate-bt" :href="'tel:' + shop.phone">拨打电话</a>
      </template>
      <input class="footer-right-bt" type="button" value="立即支付" @click="toPay">
    </footer>
    <bind :show="bindShow" @close="closePhone"></bind>
  </div>
</template>

<script>
  import 'vue-swipe/dist/vue-swipe.css'
  import { Swipe, SwipeItem } from 'vue-swipe'
  import BusinessLists from '@/components/business-lists/lists'
  import bind from '../bind/bind.vue'
  import $ from 'edom'
  import store from '../../store/store.js'

  export default {
    name: 'Index',
    data () {
      return {
        title: '爱尚丰',
        sid: this.$route.params.id,
        shop: {
          name: '',
          site: '',
          profile: '',
          phone: null
        },
        bindShow: false,
        swipers: [],
        spread: false,
        businessLists: [],
        isLoading: true,
        bind_seller: this.$store.bind_seller
      }
    },
    computed: {
      isBind () {
        return this.$store.state.isBindPhone
      }
    },
    components: {
      'swipe': Swipe,
      'swipe-item': SwipeItem,
      'bind': bind,
      'business-lists': BusinessLists
    },
    created () {
      this.setTitle(this.title)
      this.getDetail()
      this.getBusinessLists()
    },
    methods: {
      getDetail: function () {
        if (this.$store.state.bind_seller === 0) {
          this.axios.post('/api/service/detail', {
            id: this.sid,
            user_id: store.state.user_id,
            token: store.state.token
          })
          .then((res) => {
            let data = res.data
            let code = data.code
            let desc = data.desc
            if (code === 403) {
              $().Mnews('您已绑定其他商家', 1000)
              return
            }
            if (code !== 200) {
              $().Mnews('网络开了小差', 1000)
              return
            }
            this.shop.name = desc.name
            this.shop.site = desc.street_name
            this.shop.profile = desc.desc
            this.shop.phone = desc.telephone
            this.swipers = desc.pic
          })
        } else {
          this.axios.post('/api/service/detail', {
            id: this.sid,
            user_id: store.state.user_id,
            token: store.state.token,
            share: 1
          })
          .then((res) => {
            let data = res.data
            let code = data.code
            let desc = data.desc
            if (code === 403) {
              $().Mnews('您已绑定其他商家', 1000)
              return
            }
            if (code !== 200) {
              $().Mnews('网络开了小差', 1000)
              return
            }
            this.shop.name = desc.name
            this.shop.site = desc.street_name
            this.shop.profile = desc.desc
            this.shop.phone = desc.telephone
            this.swipers = desc.pic
          })
        }
      },
      getBusinessLists: function () {
        this.isLoading = true
        this.axios.post('/api/home/recommend_list', {
          lng: this.$store.state.lng,
          lat: this.$store.state.lat
        })
        .then((res) => {
          let data = res.data
          this.businessLists = data.recommend_list
          this.$nextTick(() => {
            this.isLoading = false
          })
        })
      },
      back: function () {
        if (this.$store.state.bind_seller === 0) {
          this.$router.push('/service')
        } else {
          this.$router.push('/mine')
        }
      },
      bindPhone: function () {
        this.bindShow = true
      },
      closePhone: function () {
        this.bindShow = false
      },
      toSpread: function () {
        let profileEle = this.$refs.profile
        if (this.spread) {
          this.spread = false
          profileEle.classList.remove('profile-spread')
        } else {
          this.spread = true
          profileEle.classList.add('profile-spread')
        }
      },
      toPay: function () {
        if (this.isBind) {
          this.$router.push('/pay/' + this.sid)
        } else {
          this.bindPhone()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .swipe{
    position: relative;
    height: rem(360);
    overflow: hidden;
    img{
      width: 100%;
    }
    .return{
      padding-left: rem(5);
      position: absolute;
      z-index: 999;
      top: rem(24);
      left: rem(24);
      width: rem(48);
      height: rem(48);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.5);
      font-size: rem(28);
      color: #fff;
    }
    .qrz{
      position: absolute;
      z-index: 999;
      top: rem(24);
      left: rem(80);
      height: rem(48);
      line-height: rem(48);
      font-size: rem(26);
      color: #333
    }
  }
  .shop{
    margin-bottom: rem(16);
    padding: 0 rem(24);
    background: #fff;
  }
  .shopname{
    padding: rem(20) 0;
    font-size: rem(32);
    color: #333;
  }
  .shopsite{
    padding: rem(25) 0;
    font-size: rem(26);
    color: #333;
    .iconfont{
      font-size: rem(28);
      color: #999;
      font-weight: bold;
    }
  }
  .profile{
    margin-bottom: rem(16);
    box-sizing: content-box;
    position: relative;
    background: #fff;
    padding: 0 rem(24);
    height: rem(310);
    overflow: hidden;
    transition: all .2s linear;
    h3{
      padding: rem(25) 0;
      font-size: rem(30);
      color: #141414;
      font-weight: bold;
    }
    p{
      font-size: rem(26);
      color: #666;
      line-height: 150%;
    }
    .shape{
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: rem(120);
      .linear{
        height: rem(60);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
      }
      .end{
        height: rem(60);
        background: #fff;
        text-align: center;
        font-size: rem(38);
        font-weight: bold;
        color: #333;
      }
      .spreaded{
        transform: rotate(180deg);
      }
    }
  }
  .profile-spread{
    height: auto;
    padding-bottom: rem(120);
  }
  .recommend{
    background: #fff;
    .title{
      padding: rem(35) rem(24) 0;
      text-align: center;
      line-height: rem(48);
      h3{
        display: inline-block;
        vertical-align: top;
        height: 100%;
        padding: 0 rem(30);
        font-size: rem(28);
        color: #333;
        font-weight: bold;
      }
    }
  }
  .flex-footer{
    height: rem(97);
    display: flex;
    .phone{
      position: relative;
      height: 100%;
      width: 50%;
    }
    .get-phone, .show-phone{
      height: 100%;
      width: 50%;
    }
  }
</style>

